<!-- -->
<template>
  <div class="myorder">
    <el-container>
      <el-header>
        <span>我的订单</span>
      </el-header>
      <el-main>
        <template>
          <el-table :data="tableData" style="width:100%">
            <el-table-column label="订单号" prop="id"></el-table-column>
            <el-table-column
              label="下单时间"
              prop="createTime"
            ></el-table-column>
            <el-table-column label="支付时间" prop="payTime"></el-table-column>
            <!-- <el-table-column label="数量" prop="count"></el-table-column> -->
            <el-table-column
              label="预计花费"
              prop="totalMoney"
            ></el-table-column>
            <el-table-column
              label="实际花费"
              prop="actualMoney"
            ></el-table-column>
            <el-table-column label="状态" prop="_status">
              <template slot-scope="scope">
                <el-button
                v-if="scope.row.status === 0"
                type="primary"
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                >
                  去支付
                </el-button>
                <span v-else>{{scope.row._status}}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "MyOrder",
  data() {
    return {
      userId:'',
      tableData: []
    };
  },
  created() {
    this.getMyOrder();
  },

  components: {},

  filters: {},

  computed: {},

  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    getMyOrder() {
      this.userId = sessionStorage.getItem("userId");
      this.axios
        .post("/api/orders/findByUid", {
          id: this.userId
        })
        .then(res => {
          // console.log(res.data);
          if (res.data.code == 200) {
            for (let i of res.data.data.list) {
              if (i.status === 0) i._status = "未支付";
              else if (i.status === 1) i._status = "已支付";
              else if (i.status === 2) i._status = "交易成功";
              else if (i.status === 3) i._status = "交易失败";
            }
            this.tableData = res.data.data.list;
          }
          // console.log(this.tableData);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style scoped>
.myorder {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.myorder::-webkit-scrollbar {
  display: none;
}
.el-container {
  height: 100%;
  width: 100%;
}
.el-header {
  line-height: 60px;
  text-align: left;
}
</style>